<!--

    Copyright (C) 2015 The Gravitee team (http://gravitee.io)

    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
    You may obtain a copy of the License at

            http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing, software
    distributed under the License is distributed on an "AS IS" BASIS,
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.

-->
<div class="gv-sub-content">
  <div class="gv-forms" layout="column">
    <h1>Sharding Tags</h1>
    <blockquote>
      <p style="font-size: 12px">
        <ng-md-icon icon="info" style="fill: grey"></ng-md-icon>
        Copy/paste the ID to the API gateway configuration file in order to manage API deployments.
      </p>
    </blockquote>

    <div class="gv-form">
      <div class="gv-form-content" layout="column" ng-if="$ctrl.tags.length > 0">
        <md-table-container>
          <table md-table ng-init="order = 'name'">
            <thead md-head md-order="order">
              <tr md-row>
                <th md-column md-order-by="id">ID</th>
                <th md-column md-order-by="name">Name</th>
                <th md-column md-order-by="description">Description</th>
                <th md-column md-order-by="description">Restricted groups</th>
                <th permission permission-only="'organization-tag-d'" width="10%"></th>
              </tr>
            </thead>
            <tbody md-body>
              <tr
                md-row
                ng-repeat="tag in $ctrl.tags | orderBy: order"
                ng-mouseover="hovered = true && tag.id"
                ng-mouseout="hovered = false"
              >
                <td md-cell>
                  <a ui-sref="organization.settings.ajs-tag({tagId: tag.id})">{{tag.id}}</a>
                  <span style="position: absolute">
                    <md-tooltip md-direction="right">Copy to clipboard</md-tooltip>
                    <ng-md-icon
                      ng-show="hovered"
                      ng-hide="!hovered"
                      icon="link"
                      ngclipboard
                      data-clipboard-text="{{tag.id}}"
                      ngclipboard-success="$ctrl.onClipboardSuccess(e);"
                      role="button"
                      style="margin-left: 3px; top: -6px"
                    ></ng-md-icon>
                  </span>
                </td>
                <td md-cell>{{tag.name}}</td>
                <td md-cell>{{tag.description}}</td>
                <td md-cell>{{$ctrl.groupNames(tag.restricted_groups)}}</td>
                <td md-cell permission permission-only="'organization-tag-d'" ng-click="$event.stopPropagation()">
                  <ng-md-icon icon="delete" ng-click="$ctrl.deleteTag(tag)"></ng-md-icon>
                </td>
              </tr>
            </tbody>
          </table>
        </md-table-container>
      </div>
      <form name="$ctrl.formSettings" class="gv-form" ng-submit="$ctrl.saveSettings()">
        <h2>Default configuration</h2>
        <div class="gv-form-content" layout="column">
          <md-input-container class="md-block" flex-gt-xs>
            <label>Entrypoint</label>
            <input ng-model="$ctrl.settings.portal.entrypoint" ng-disabled="$ctrl.isReadonlySetting('portal.entrypoint')" />
            <md-tooltip ng-if="$ctrl.isReadonlySetting('portal.entrypoint')">{{$ctrl.providedConfigurationMessage}}</md-tooltip>
          </md-input-container>
          <md-card-actions>
            <md-button
              type="submit"
              class="md-raised md-primary"
              ng-disabled="$ctrl.formSettings.$invalid || $ctrl.formSettings.$pristine"
              permission
              permission-only="['organization-entrypoint-c', 'organization-entrypoint-u', 'organization-entrypoint-d']"
              >Save</md-button
            >
            <md-button
              type="button"
              class="md-raised"
              ng-click="$ctrl.resetSettings()"
              ng-disabled="$ctrl.formSettings.$invalid || $ctrl.formSettings.$pristine"
              permission
              permission-only="['organization-entrypoint-c', 'organization-entrypoint-u', 'organization-entrypoint-d']"
              >Reset</md-button
            >
          </md-card-actions>
        </div>
      </form>
      <br />
      <a ng-if="$ctrl.tags && $ctrl.tags.length" ui-sref="organization.settings.ajs-newEntrypoint"
        >Add a mapping configuration entrypoint / tags</a
      >
      <br />
      <div class="gv-form-content" layout="column" ng-if="$ctrl.entrypoints && $ctrl.entrypoints.length">
        <md-table-container>
          <table md-table>
            <thead md-head>
              <tr md-row>
                <th md-column>Entrypoint</th>
                <th md-column>Tags</th>
                <th permission permission-only="'organization-entrypoint-u'" width="64px" nowrap></th>
                <th permission permission-only="'organization-entrypoint-d'" width="64px" nowrap></th>
              </tr>
            </thead>
            <tbody md-body>
              <tr md-row ng-repeat="entrypoint in $ctrl.entrypoints | orderBy: order">
                <td md-cell>{{entrypoint.value}}</td>
                <td md-cell>{{entrypoint.tags.join(', ')}}</td>
                <td md-cell permission permission-only="'organization-entrypoint-u'">
                  <ng-md-icon icon="edit" ui-sref="organization.settings.ajs-entrypoint({entrypointId: entrypoint.id})"></ng-md-icon>
                </td>
                <td md-cell permission permission-only="'organization-entrypoint-d'">
                  <ng-md-icon icon="delete" ng-click="$ctrl.deleteEntrypoint(entrypoint)"></ng-md-icon>
                </td>
              </tr>
            </tbody>
          </table>
        </md-table-container>
      </div>
    </div>
    <gravitee-empty-state ng-if="$ctrl.tags.length == 0" icon="label" message="There is no sharding tag to manage"></gravitee-empty-state>
    <div ng-style="{'text-align': $ctrl.tags.length == 0 ? 'center' : 'none' }">
      <md-button
        permission
        permission-only="['organization-tag-c']"
        ng-class="{'md-fab-bottom-right md-fab-scrollable': $ctrl.tags.length > 0, 'gv-help-displayed': $ctrl.$rootScope.helpDisplayed}"
        class="md-fab"
        aria-label="Add"
        ng-click="$ctrl.showAddTagModal()"
        ui-sref="organization.settings.ajs-tag({tagId: 'new'})"
      >
        <ng-md-icon icon="add"></ng-md-icon>
      </md-button>
    </div>
  </div>
</div>
